<template>
  <el-dialog v-dialogDrag v-if="popenevTVisible" title="请选择" :before-close="handleCancel" :visible.sync="popenevTVisible" width="320px" :close-on-click-modal="false">
    <!-- 搜索框 -->
    <el-input placeholder="搜索" v-model="searchkey">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-scrollbar class="scorll-Y">
      <el-checkbox v-if="multiple" style="margin-top:20px;margin-left:24px" v-model=" checkAll " @change=" handleCheckAllChange ">全选</el-checkbox>
      <el-tree class="filter-tree mt-10" :data="treeData" :props="defaultProps" :node-key="replaceFields.key || replaceFields.value" :default-expand-all="defaultExpandAll" :default-checked-keys="selectedKeys" :expand-on-click-node="false" :highlight-current="true" :check-on-click-node="true" :show-checkbox="true" :check-strictly="checkStrictly" :default-expanded-keys="expandKeys" @check-change="onSelect" :filter-node-method="filterNode" ref="tree">
      </el-tree>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleOk">确定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data()
  {
    return {
      popenevTVisible: true,
      searchkey: null,
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      multiple: false,
      orgList: [],
      replaceFields: {
        title: "label",
        key: "value",
      },
      //是否全选
      checkAll: false,
      //默认展开key
      expandKeys: [],
      //是否默认展开全部
      defaultExpandAll: true,
      //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
      checkStrictly: true,
      //promise 状态
      promiseStatus: null,
      // 当前过滤的节点数据
      currentNode: []
    };
  },
  computed: {
    defaultProps()
    {
      let tampObj = {};
      tampObj.label = this.replaceFields.title || this.replaceFields.label;
      tampObj.value = this.replaceFields.key || this.replaceFields.value;
      tampObj.children = this.replaceFields.children || "children";
      return tampObj;
    },
  },
  watch: {
    searchkey(val)
    {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data, node)
    {
      if (!value)
      {
        return true;
      }
      let parentNode = node.parent;
      if (parentNode)
      {
        let parentData = parentNode.data;
        if (parentData.constructor == Object)
        {
          return data[this.defaultProps.label].indexOf(value) !== -1 || parentData[this.defaultProps.label].indexOf(value) !== -1;
        }
        else
        {
          return data[this.defaultProps.label].indexOf(value) !== -1
        }
      }
      else
      {
        return data[this.defaultProps.label].indexOf(value) !== -1
      }
    },
    show(showData, treeList, replaceFields, multiple, config)
    {
      this.checkStrictly =
        config.checkStrictly != undefined && config.checkStrictly != null
          ? config.checkStrictly
          : true; //在显示复选框的情况下，是否严格的遵循父子不互相关联的做法
      this.defaultExpandAll =
        config.defaultExpandAll != undefined && config.defaultExpandAll != null
          ? config.defaultExpandAll
          : true; //默认展开所以节点
      this.expandKeys = config.expandKeys || [];
      if (this.expandKeys && this.expandKeys.length > 0)
      {
        this.defaultExpandAll = false;
      }

      this.multiple = multiple || false;
      this.treeData = treeList || [];
      this.replaceFields = replaceFields || this.replaceFields;

      if (showData && showData.constructor == Array)
      {
        this.selectedKeys = [...showData];
      }
      console.log(this.selectedKeys);

      // 创建promise
      return new Promise((resolve, reject) =>
      {
        this.promiseStatus = {
          resolve,
          reject,
        };
      });
    },
    handleOk()
    {
      //父子级关联时 自返回最子级的勾选this.checkStrictly
      let selects = this.$refs.tree.getCheckedNodes(!this.checkStrictly);
      if (selects && selects.length > 0)
      {
        this.promiseStatus.resolve({
          choiceData: selects,
          replaceFields: this.replaceFields,
        });
      } else
      {
        this.promiseStatus.reject({
          msg: "未选择",
        });
      }
      //清空勾选项
      this.selectedKeys = [];

      this.destroyElement();
    },
    handleCancel()
    {
      //清空勾选项
      this.promiseStatus.reject({
        msg: "取消",
      });
      this.selectedKeys = [];
      this.destroyElement();
    },
    onSelect(data, check, tree)
    {
      if (check && !this.multiple)
      {
        this.$refs.tree.setCheckedKeys([data[this.defaultProps.value]]);
      }
    },
    /**
     * 监听搜索框改变
     */
    searchChange(e)
    {
      console.log(this.searchkey);
    },
    /**
     * cs 2022-4-8
     * 销毁组件
     */
    destroyElement()
    {
      this.popenevTVisible = false;
    },
    //全选或取消全选
    handleCheckAllChange(bool)
    {
      let curNodeKeys = this.getTreeKeyList();
      curNodeKeys.forEach(preNodeKey =>
      {
        this.$refs.tree.setChecked(preNodeKey, bool);
      })
    },
    // 获取当前树节点数据
    getTreeKeyList()
    {
      let keyList = [];
      const getTreeKey = (P_List) =>
      {
        P_List.forEach(pre_item =>
        {
          if (pre_item.disabled != true)
          {
            keyList.push(pre_item[this.defaultProps.value]);
          }
          if (pre_item.children && pre_item.children.length > 0)
          {
            getTreeKey(pre_item.children);
          }
        })
      }
      getTreeKey(this.treeData);
      return keyList;
    }
  },
};
</script>

<style lang="scss" scoped>
.scorll-Y {
  height: 400px;
  margin-top: 10px;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
</style>
